﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Sheet Events</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    var spreadNS = GcSpread.Sheets;
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
        initSpread(spread);
    });

    function initSpread(spread) {
        var sheet = spread.getSheet(0);
        sheet.isPaintSuspended(true);
        setstatus(sheet);

        sheet.setValue(2, 2, "Click me and input a char by keyboard!");
        sheet.addSpan(2, 2, 1, 5);
        sheet.setBorder(new spreadNS.Range(2, 2, 1, 5), new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true });
        sheet.setValue(4, 2, "Double click the black empty cell!");
        sheet.addSpan(4, 2, 1, 5);
        sheet.addSpan(5, 2, 1, 5);
        sheet.setBorder(new spreadNS.Range(5, 2, 1, 5), new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true });
        sheet.setValue(7, 2, "Double click me!");
        sheet.addSpan(7, 2, 1, 5);
        sheet.setBorder(new spreadNS.Range(7, 2, 1, 5), new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true });
        sheet.setValue(9, 2, "Double click the black empty cell and click it again!");
        sheet.addSpan(9, 2, 1, 5);
        sheet.addSpan(10, 2, 1, 5);
        sheet.setBorder(new spreadNS.Range(10, 2, 1, 5), new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true });

        sheet.isPaintSuspended(false);
        sheet.bind(spreadNS.Events.EditorStatusChanged, function () {
            setstatus(sheet);
        });
    };

    function setstatus(sheet) {
        var statusnow = sheet.editorStatus();
        if (statusnow === spreadNS.EditorStatus.Ready) {
            $("#status").text("Editor Status: Ready!");
            $("#describe").text("Cell is not being edited.");
        } else if (statusnow === spreadNS.EditorStatus.Enter) {
            $("#status").text("Editor Status: Enter!");
            $("#describe").text("Cell is being edited, you can leave the cell by pressing one of the arrow keys.");
        } else if (statusnow === spreadNS.EditorStatus.Edit) {
            $("#status").text("Editor Status: Edit!");
            $("#describe").text("Cell is being edited, you can not leave the cell by pressing one of the arrow keys.");
        }
    }
    /*code_end*/
    </script>
</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:380px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label style="color:rgb(226,107,29);display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size: 18px;font-weight: normal;height:30px;line-height: 30px " id="status">Settings</label>
        </div>
        <div class="option-row">
            <label id="describe"></label>
        </div>
    </div>
</div>
</body>
</html>
